<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_超连接</title>
</head>
<body>
    <a href="https://www.tmooc.cn/">达内</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="01_HTML结构.html">今日第一个界面</a>
    <a href="小埋.jpg">小埋</a>

    <!--  图片超链接：超连接中包裹的显示内容是一张图片  -->
    <a href="http://www.baidu.com/">
        <img src="小埋.jpg">
    </a>
    <!-- 锚点 -->
    <h1>ys日记</h1>
    <a href="#c1">快速转跳至第一章</a>
    <a href="#c2">快速转跳至第二章</a>
    <a href="#c3">快速转跳至第三章</a>
    <a href="#c4">快速转跳至第四章</a>
    <h3 id="c1">第一章 在吃糖</h3>
    <p>
        lorem*10
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores blanditiis cumque ducimus et eveniet impedit, ipsam itaque laudantium, magnam magni minus molestiae nemo nesciunt, numquam perferendis sed ut vitae?</span><span>Autem culpa ex fuga optio quam quia repellendus sequi! Aperiam architecto assumenda blanditiis consectetur dolorum ea eaque eveniet, excepturi facere itaque, laudantium necessitatibus numquam odio, optio possimus quibusdam vero vitae.</span><span>Animi cupiditate deserunt dicta dignissimos, doloremque ducimus ea explicabo fuga fugiat hic ipsa, iure, mollitia nostrum porro recusandae reprehenderit ut vel veritatis. Aliquam id, neque nobis odit porro possimus sit!</span><span>Accusantium autem ipsum, magni modi perspiciatis quas. Ab adipisci assumenda blanditiis consectetur excepturi expedita inventore, magnam minus molestias obcaecati odit perferendis provident quasi quia quibusdam quo repellat sequi, veniam voluptatibus.</span><span>Accusantium aliquam animi autem beatae blanditiis commodi consectetur deleniti doloribus eligendi excepturi, hic inventore itaque labore libero maiores, molestias natus non numquam obcaecati officiis quam quis quo sunt ullam vitae?</span>
    </p>
    <h3 id="c2">第二章 在看小说</h3>
    <p>
        lorem*10
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores blanditiis cumque ducimus et eveniet impedit, ipsam itaque laudantium, magnam magni minus molestiae nemo nesciunt, numquam perferendis sed ut vitae?</span><span>Autem culpa ex fuga optio quam quia repellendus sequi! Aperiam architecto assumenda blanditiis consectetur dolorum ea eaque eveniet, excepturi facere itaque, laudantium necessitatibus numquam odio, optio possimus quibusdam vero vitae.</span><span>Animi cupiditate deserunt dicta dignissimos, doloremque ducimus ea explicabo fuga fugiat hic ipsa, iure, mollitia nostrum porro recusandae reprehenderit ut vel veritatis. Aliquam id, neque nobis odit porro possimus sit!</span><span>Accusantium autem ipsum, magni modi perspiciatis quas. Ab adipisci assumenda blanditiis consectetur excepturi expedita inventore, magnam minus molestias obcaecati odit perferendis provident quasi quia quibusdam quo repellat sequi, veniam voluptatibus.</span><span>Accusantium aliquam animi autem beatae blanditiis commodi consectetur deleniti doloribus eligendi excepturi, hic inventore itaque labore libero maiores, molestias natus non numquam obcaecati officiis quam quis quo sunt ullam vitae?</span>
    </p>
    <h3 id="c3">第三章 在追剧</h3>
    <p>
        lorem*10
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores blanditiis cumque ducimus et eveniet impedit, ipsam itaque laudantium, magnam magni minus molestiae nemo nesciunt, numquam perferendis sed ut vitae?</span><span>Autem culpa ex fuga optio quam quia repellendus sequi! Aperiam architecto assumenda blanditiis consectetur dolorum ea eaque eveniet, excepturi facere itaque, laudantium necessitatibus numquam odio, optio possimus quibusdam vero vitae.</span><span>Animi cupiditate deserunt dicta dignissimos, doloremque ducimus ea explicabo fuga fugiat hic ipsa, iure, mollitia nostrum porro recusandae reprehenderit ut vel veritatis. Aliquam id, neque nobis odit porro possimus sit!</span><span>Accusantium autem ipsum, magni modi perspiciatis quas. Ab adipisci assumenda blanditiis consectetur excepturi expedita inventore, magnam minus molestias obcaecati odit perferendis provident quasi quia quibusdam quo repellat sequi, veniam voluptatibus.</span><span>Accusantium aliquam animi autem beatae blanditiis commodi consectetur deleniti doloribus eligendi excepturi, hic inventore itaque labore libero maiores, molestias natus non numquam obcaecati officiis quam quis quo sunt ullam vitae?</span>
    </p>
    <h3 id="c4">第四章 在睡觉</h3>
    <p>
        lorem*10
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores blanditiis cumque ducimus et eveniet impedit, ipsam itaque laudantium, magnam magni minus molestiae nemo nesciunt, numquam perferendis sed ut vitae?</span><span>Autem culpa ex fuga optio quam quia repellendus sequi! Aperiam architecto assumenda blanditiis consectetur dolorum ea eaque eveniet, excepturi facere itaque, laudantium necessitatibus numquam odio, optio possimus quibusdam vero vitae.</span><span>Animi cupiditate deserunt dicta dignissimos, doloremque ducimus ea explicabo fuga fugiat hic ipsa, iure, mollitia nostrum porro recusandae reprehenderit ut vel veritatis. Aliquam id, neque nobis odit porro possimus sit!</span><span>Accusantium autem ipsum, magni modi perspiciatis quas. Ab adipisci assumenda blanditiis consectetur excepturi expedita inventore, magnam minus molestias obcaecati odit perferendis provident quasi quia quibusdam quo repellat sequi, veniam voluptatibus.</span><span>Accusantium aliquam animi autem beatae blanditiis commodi consectetur deleniti doloribus eligendi excepturi, hic inventore itaque labore libero maiores, molestias natus non numquam obcaecati officiis quam quis quo sunt ullam vitae?</span>
    </p>
    <a href="#">跳转至顶部</a>
</body>
</html>